<template>
	<view class="cate">
		<scroll-view scroll-y="true" class="left">
			<van-collapse accordion :value="activeName" @change="onChange">
				<van-collapse-item v-for="(item,index) in categories" :title="item.name" :name="index">
					<van-sidebar :active-key="activeKey">
					  <van-sidebar-item v-for="(i,ind) in item.children" :title="i.name" @click="changeItem(i.id)" />
					</van-sidebar>
				</van-collapse-item>
			
			</van-collapse>
		</scroll-view>
		<!-- 左侧的导航 下拉菜单手风琴效果 -->
		
		<view class="right">
			<van-tabs  @change="changeTab">
			  <van-tab title="销量" name="sales"></van-tab>
			  <van-tab title="价格" name="price"></van-tab>
			  <van-tab title="评论" name="comments_count"></van-tab>
			 
			</van-tabs>
			<!-- 评论的tab切换 -->
			<view class="right-con">
				<view v-for="(item,index) in goods" :key="index" @click="gotoDetail(item.id)">
					<image :src="item.cover_url" mode=""></image>
					<text>{{item.title}}</text>
				</view>
			</view>
			<!-- 右侧的商品列表 -->
		</view>
	</view>
</template>

<script>
import { getIndex,getList } from '../../request/api.js';
export default {
	data() {
		return {
			categories: [],
			activeName: '',
			activeKey:"",
			goods:[]
		};
	},
	onLoad() {
		getIndex({ sales: 1 }).then(res => {
			console.log(res);

			this.categories = res.categories;
		});
		
		this.changeItem(185)
	},
	methods: {
		onChange(e) {
			console.log(e);
			this.activeName = e.detail;
			//拿到数据给activeName赋值 实现手风琴效果
		},
		//点击手风琴
		changeItem(id){
			console.log(id);
			getList({category_id:id}).then(res=>{
				console.log(res);
				//本来应该拿data来用的 但是这里data没数据 只能拿 推荐商品了 所以点击不同的分类展示的商品是一样的 
				this.goods=res.recommend_goods
				
			})
		},
		//点击不同的分类拿到列表数据
		changeTab(e){
			console.log(e);
			let {name}=e.detail
			this.goods.sort((a,b)=>{
				return a[name]-b[name]
			})
			
		},
		//点击不同的排序选项
		gotoDetail(id){
			uni.navigateTo({
				url:"/pages/detail/detail?id="+id
			})
			
		}
		
	},

};
</script>

<style lang="scss" scoped>
	.cate{
		width: 100%;
		display: flex;
		.left{
			width:30%;
		}
		.right{
			width: 70%;
			
			.right-con{
				display: flex;
				flex-wrap:wrap;
				justify-content: space-around;
				
				view{
					width: 48%;
					image{
						width: 100%;
						height: 300rpx;
					}
				}
				
			}
		}
	}
	
</style>
